<template>
	<view class="page flex-col">
		<view class="group_1 flex-col">
			<view class="group_2 flex-row" style="flex-direction: column;">
				<view class="box_1 flex-col">
					<view class="box_2 flex-row" style="justify-content: space-around">
						<image class="image_1" referrerpolicy="no-referrer" src="../../static/27.png"   @click="fanhui"/>
						<text class="text_1">查询结果</text>
						<text style="font-size: 160rpx;color: #fff;font-weight: 700;">{{ countdown }}</text>
					</view>
					<view class="text-wrapper_1 flex-col">
						<text class="text_2">号码:{{detailstyle}}</text>
					</view>
				</view>
				<scroll-view class="footer-3" scroll-y>
					<view class="">
						<view class="box_4 flex-row justify-between" v-for="(item,index) in 6" :key="index" @click="codelist">
							<image class="image_3" referrerpolicy="no-referrer"
								src="../../static/28.png" />
							<view class="text-wrapper_2 flex-col">
								<text class="text_3">点拓科技充值卡300元</text>
								<text class="text_4">剩余:20元</text>
								<text class="text_5">有效期:2023/12/15~12/16</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="text-wrapper_12 flex-col flex-row justify-between">
					<view class="" style="display: flex;flex-direction: column;align-items: center;">
						<view class="text_21">合计:</view>
						<view class="text_22">￥20</view>
					</view>
					<!-- 	<image src="../../static/zhifubao.png" style="width: 300px;height: 130px;" mode="">
					</image> -->
					<image src="../../static/zhifu.png" style="width: 300px;height: 130px; " @click="addlist" mode="">
					</image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				constants: {},
				countdown: 6000,
				detailstyle:''
			};
		},
		onLoad(options) {
			console.log(options)
			this.detailstyle = options.detailstyle
		},
		mounted() {
			this.startCountdown();
		},
		onUnload() {
			clearInterval(this.timer);
			this.timer = null
		},
		// tabbar页面用onHide
		onHide() {
			clearInterval(this.timer);
			this.timer = null
		},
		methods: {
			codelist(){
				// uni.navigateTo({
				// 	url:'../code/codea'
				// })
			},
			fanhui(){
				uni.$u.route({
					url: '/pages/login/login',
					params: {}
				});
			},
			startCountdown() {
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						this.clearTimer();
						uni.$u.route({
							url: '/pages/index/index',
							params: {}
						});
					}
				}, 1000);
			},
			clearTimer() {
				// this.timer = null;
				clearInterval(this.timer);
				this.timer = null
			},
		},
	};
</script>
<style>
	/* @import './common.css'; */
	/* @import './index.rpx.css'; */
	.page {
		position: relative;
		width: 1080px;
		height: 100vh;
		overflow: hidden;
	}

	.footer-3 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 30px;
		height: 1451px;
		width: 90vw;
		margin-left: 5vw;
		padding: 10px;
	}

	/* 	.group_1 {
		height: 1920px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/pspw0n03v31mgtrtq7nz5hh5pymo34wi8lc0548658-d946-4b71-9ef9-d3e20f54e0ce) 100% no-repeat;
		background-size: 100% 100%;
		width: 1080px;
	} */

	.group_2 {
		height: 100%;
		height: 100vh;
		background-image: url('../../static/26.png');
		background-size: cover;
		background-repeat: no-repeat;
	}

	.box_1 {
		width: 1080px;
		height: 415px;
	}

	.box_2 {
		width: 100vw;
		height: 106px;
		margin: 60px 0 0 0;
	}

	.image_1 {
		width: 106px;
		height: 106px;
	}

	.text_1 {
		width: 250px;
		height: 55px;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 60px;
		font-family: zihun59hao-chuangcuhei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 60px;
		margin: 25px 0 0 45px;
	}

	.image_2 {
		width: 64px;
		height: 71px;
		margin: 17px 0 0 286px;
	}

	.text-wrapper_1 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 30px;
		height: 149px;
		width: 90vw;
		margin-left: 5vw;
		margin-top: 5vw;
	}
	
	.text-wrapper_12 {
		// background-color: rgba(255, 255, 255, 1);
		border-radius: 30px;
		height: 149px;
		width: 90vw;
		margin-left: 5vw;
		margin-top: 5vw;
	}

	.text_2 {
		width: 406px;
		height: 46px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 50px;
		font-family: zihun59hao-chuangcuhei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 50px;
		margin: 52px 0 0 52px;
	}
	
	.text_21 {
		width: 200px;
		height: 46px;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1.0);
		font-size: 50px;
		font-family: zihun59hao-chuangcuhei;
		font-weight: NaN;
		white-space: nowrap;
		line-height: 50px;
		// margin: 52px 0 0 52px;
	}
	
	.text_22 {
		width: 200px;
		height: 46px;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1.0);
		font-size: 50px;
		font-family: zihun59hao-chuangcuhei;
		font-weight: NaN;
		white-space: nowrap;
		line-height: 50px;
		margin-top: 20px;
		// margin: 10px 0 0 52px;
	}

	.box_3 {
		/* background-color: rgba(255, 255, 255, 1);
		border-radius: 30px;
		height: 1451px;
		width: 90vw;
		margin-left: 5vw; */
		/* margin: 414px 60px 0 -1020px; */
	}

	.box_4 {
		width: 96%;
		height: 233px;
		margin: 29px 0 0 30px;
	}

	.image_3 {
		width: 366px;
		height: 232px;
		margin-top: 1px;
	}

	.text-wrapper_2 {
		width: 560px;
		height: 233px;
		margin-left: 20px;
	}

	.text_3 {
		width: 540px;
		height: 38px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 38px;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 38px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.text_4 {
		width: 540px;
		height: 32px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 34px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34px;
		margin: 104px 0 0 1px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.text_5 {
		width: 540px;
		height: 32px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 34px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34px;
		margin: 27px 0 0 1px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.box_5 {
		width: 910px;
		height: 235px;
		margin: 37px 0 0 30px;
	}

	.image_4 {
		width: 366px;
		height: 232px;
		margin-top: 1px;
	}

	.text-wrapper_3 {
		width: 519px;
		height: 235px;
	}

	.text_6 {
		width: 540px;
		height: 38px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 38px;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 38px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.text_7 {
		width: 540px;
		height: 32px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 34px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34px;
		margin-top: 106px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.text_8 {
		width: 540px;
		height: 32px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 34px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34px;
		margin-top: 27px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>